<style>
  .companyFormPhotos {
    /* margin-left:140px; */
    line-height: 38px;
    float: left;
  }
  .companyFormPhotos img {
    cursor: pointer;
    height: 38px;
    width: auto;
    max-width: 200px;
  }
</style>
<!-- 正文开始 -->
<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-card-body">
      <!-- 头部操作栏 -->
      <div class="layui-form lay-header">
        <div class="toolbar">
          <div class="layui-form-item lay-query-content">
            <div class="lay-query-box">
              <div class="query-lt">
                <div class="layui-inline">
                  <label class="layui-form-label w-auto">产品名称</label>
                  <div class="layui-input-inline mr0">
                    <input
                      name="productName"
                      class="layui-input"
                      type="text"
                      placeholder="请输入产品名称"
                      autocomplete="off"
                    />
                  </div>
                </div>
                <div class="layui-inline">
                  <label class="layui-form-label w-auto">产品类型</label>
                  <div class="layui-input-inline mr0">
                    <input
                      name="productTypeName"
                      class="layui-input"
                      type="text"
                      placeholder="请输入产品类型"
                      autocomplete="off"
                    />
                  </div>
                </div>
                <div class="layui-inline">
                  <label class="layui-form-label w-auto">厂家</label>
                  <div class="layui-input-inline mr0">
                    <input
                      name="productProducerName"
                      class="layui-input"
                      type="text"
                      placeholder="请输入厂家"
                      autocomplete="off"
                    />
                  </div>
                </div>
                <div class="layui-inline">
                  <label class="layui-form-label w-auto">牌号</label>
                  <div class="layui-input-inline mr0">
                    <input
                      name="productMarkName"
                      class="layui-input"
                      type="text"
                      placeholder="请输入牌号"
                      autocomplete="off"
                    />
                  </div>
                </div>
                <div class="layui-inline">
                  <label class="layui-form-label w-auto">品种</label>
                  <div class="layui-input-inline mr0">
                    <input
                      name="productVarietyName"
                      class="layui-input"
                      type="text"
                      placeholder="请输入品种"
                      autocomplete="off"
                    />
                  </div>
                </div>
                <div class="layui-inline">
                  <label class="layui-form-label w-auto">客户规格码</label>
                  <div class="layui-input-inline mr0">
                    <input
                      name="productSpecCode"
                      class="layui-input"
                      type="text"
                      placeholder="请输入规格码"
                      autocomplete="off"
                    />
                  </div>
                </div>
                <div class="layui-inline">
                  <label class="layui-form-label w-auto">客户物料</label>
                  <div class="layui-input-inline mr0">
                    <input
                      name="productCode"
                      class="layui-input"
                      type="text"
                      placeholder="请输入物料"
                      autocomplete="off"
                    />
                  </div>
                </div>
                <div class="layui-inline">
                  <button
                    class="layui-btn icon-btn color-green"
                    lay-filter="formSubSearchLog"
                    lay-submit
                    layui-form-keyDownSearch="true"
                  >
                    查询
                  </button>
                  <button
                    class="layui-btn icon-btn color-white"
                    lay-filter="resets"
                    lay-submit
                  >
                    重置
                  </button>
                </div>
              </div>
              <div class="query-rt"></div>
            </div>
          </div>
        </div>
        <div class="lay-btn-rows">
          <div class="lay-btn-box">
            <div class="lay-btn-lt">
              <button
                id="warehouseProductBtnAdd"
                class="layui-btn icon-btn color-reseda"
              >
                添加
              </button>
              <button
                id="configFun"
                style="display: none"
                class="layui-btn icon-btn color-reseda"
                type="button"
              >
                确认选择
              </button>
            </div>
            <div class="lay-btn-rt"></div>
          </div>
        </div>
      </div>
      <!-- 表格 -->
      <table
        class="layui-table"
        id="warehouseProductTable"
        lay-filter="warehouseProductTable"
      ></table>
    </div>
  </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="warehouseProductTableBar">
  <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">详情</a>
  <!--    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>-->
</script>

<!-- 表单弹窗 -->
<script type="text/html" id="warehouseProductForm">
  <form lay-filter="warehouseProductForm" class="layui-form model-form">
    <input name="id" type="hidden" />
    <div class="layui-form-item">
      <label class="layui-form-label">所属客户</label>
      <div class="layui-input-block">
        <input type="hidden" id="customerName" name="customerName" />
        <select
          id="customerNameId"
          name="customerNameId"
          lay-filter="customerNameId"
          lay-verify="required"
          required
        ></select>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">产品类型</label>
      <div class="layui-input-block">
        <select
          id="productTypeId"
          name="productTypeId"
          lay-filter="productTypeId"
          lay-verify="required"
          lay-search
          required
        ></select>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">品种</label>
      <div class="layui-input-block">
        <select
          id="productVarietyId"
          name="productVarietyId"
          lay-filter="productVarietyId"
          lay-verify="required"
          lay-search
          required
        ></select>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">材质</label>
      <input type="hidden" id="productMaterialId" name="productMaterialId" />
      <div class="layui-input-block" id="productMaterial"></div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">产品名称</label>
      <div class="layui-input-block">
        <input
          id="productName"
          name="productName"
          placeholder="请输入产品名称"
          type="text"
          class="layui-input"
          autocomplete="off"
        />
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">产品料号编码</label>
      <div class="layui-input-block">
        <input
          id="productCode"
          name="productCode"
          placeholder="请输入产品料号编码"
          type="text"
          class="layui-input"
          autocomplete="off"
        />
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">规格码</label>
      <div class="layui-input-block">
        <input
          id="productSpecCode"
          name="productSpecCode"
          placeholder="请输入规格码"
          type="text"
          class="layui-input"
          autocomplete="off"
        />
      </div>
    </div>
    <!--        <div class="layui-form-item">-->
    <!--            <label class="layui-form-label">图片</label>-->
    <!--            <div class="layui-input-block">-->
    <!--                <div id="productImageUrlPath" class="companyFormPhotos"></div>-->
    <!--                <div id="btnProductImageUrl" class="layui-btn" style="float: left;"><i class="layui-icon">&#xe681;</i>上传图片</div>-->
    <!--                <input  id="productImageUrl" name="productImageUrl" type="hidden" class="layui-input" lay-verify=""/>-->
    <!--            </div>-->
    <!--        </div>-->
    <div class="layui-form-item">
      <label class="layui-form-label">宽度/外径</label>
      <div class="layui-input-block">
        <input
          id="width"
          name="width"
          placeholder="请输入宽度/外径"
          type="text"
          class="layui-input"
          autocomplete="off"
        />
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">长度</label>
      <div class="layui-input-block">
        <input
          id="productLength"
          name="productLength"
          placeholder="请输入长度"
          type="text"
          class="layui-input"
          autocomplete="off"
          required
          value="0"
        />
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">厚度/壁厚/直径</label>
      <div class="layui-input-block">
        <input
          id="diameter"
          name="diameter"
          placeholder="请输入厚度/壁厚/直径"
          type="text"
          class="layui-input"
          autocomplete="off"
        />
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">净重（吨）</label>
      <div class="layui-input-block">
        <input
          id="netWeight"
          name="netWeight"
          placeholder="请输入净重"
          type="text"
          class="layui-input"
          autocomplete="off"
        />
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">毛重（吨）</label>
      <div class="layui-input-block">
        <input
          id="grossWeight"
          name="grossWeight"
          placeholder="请输入毛重"
          type="text"
          class="layui-input"
          autocomplete="off"
        />
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">所属分类</label>
      <input id="productCategoryId" name="productCategoryId" type="hidden" />
      <div class="layui-input-block" id="productCategory"></div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">品牌</label>
      <div class="layui-input-block">
        <select
          id="productBrandId"
          name="productBrandId"
          lay-filter="productBrandId"
          lay-verify="required"
          lay-search
          required
        ></select>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">牌号</label>
      <div class="layui-input-block">
        <select
          id="productMarkId"
          name="productMarkId"
          lay-filter="productMarkId"
          lay-verify="required"
          lay-search
          required
        ></select>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">生产厂家</label>
      <div class="layui-input-block">
        <select
          id="productProducerId"
          name="productProducerId"
          lay-filter="productProducerId"
          lay-verify="required"
          lay-search
          required
        ></select>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">主单位</label>
      <div class="layui-input-block">
        <select
          id="productMainUnitId"
          name="productMainUnitId"
          lay-filter="productMainUnitId"
          lay-verify="required"
          lay-search
          required
        ></select>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">辅单位</label>
      <div class="layui-input-block">
        <select
          id="productSubUnitId"
          name="productSubUnitId"
          lay-filter="productSubUnitId"
          lay-verify="required"
          lay-search
          required
        ></select>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">备注</label>
      <div class="layui-input-block">
        <input
          id="remark"
          name="remark"
          placeholder="请输入备注"
          type="text"
          class="layui-input"
          autocomplete="off"
        />
      </div>
    </div>
    <div class="layui-form-item text-right">
      <button
        class="layui-btn layui-btn-primary"
        type="button"
        ew-event="closeDialog"
      >
        取消
      </button>
      <button
        class="layui-btn"
        lay-filter="warehouseProductFormSubmit"
        lay-submit
      >
        保存
      </button>
    </div>
  </form>
</script>

<!-- js部分 -->
<script>
  layui.use(
    ["layer", "form", "table", "admin", "upload", "tableTreeDj", "config"],
    function () {
      var $ = layui.jquery;
      var layer = layui.layer;
      var form = layui.form;
      var table = layui.table;
      var config = layui.config;
      var admin = layui.admin;
      var upload = layui.upload;
      var tableTree = layui.tableTreeDj;
      let nowData = {};
      let where = {};

      if (typeof parentData !== "undefined") {
        nowData = { ...parentData };
        console.log(nowData);
        if (nowData.eventName == "radio" || nowData.eventName == "checkbox") {
          $("#configFun").show();
          where = {
            notInListIds: nowData.notInListIds,
            customerId: nowData.customerId,
          };
        }
      }

      // 渲染表格
      var insTb = table.render({
        elem: "#warehouseProductTable",
        url: config.base + "warehouse/warehouse/product/list",
        // where: {notInListIds: nowData.notInListIds ,customerId: customerId},
        where: { ...where },
        toolbar: true,
        defaultToolbar: ["filter"],
        page: true,
        cellMinWidth: 100,
        cols: [
          [
            {
              type: "checkbox",
              hide: nowData.eventName == "checkbox" ? false : true,
            },
            { type: "numbers", title: "序号", index: 1 },
            {
              field: "productCode",
              title: "客户产品料号编码",
              align: "center",
            },
            { field: "productName", title: "客户产品名称", align: "center" },
            { field: "productSpecCode", title: "客户规格码", align: "center" },
            { field: "productType", title: "产品类型", align: "center" },
            { field: "productCategory", title: "所属分类", align: "center" },
            { field: "productProducer", title: "厂家", align: "center" },
            { field: "productMark", title: "牌号", align: "center" },
            { field: "productMainUnit", title: "计量单位", align: "center" },
            { field: "width", title: "宽度mm", align: "center" },
            { field: "productLength", title: "长度mm", align: "center" },
            { field: "diameter", title: "厚度mm", align: "center" },
            { field: "netWeight", title: "净重", align: "center" },
            { field: "grossWeight", title: "毛重", align: "center" },
            { field: "customer", title: "所属客户", align: "center" },
            {
              align: "center",
              toolbar: "#warehouseProductTableBar",
              title: "操作",
              width: 200,
              fixed: "right",
            },
          ],
        ],
        done: function (res, curr, count) {
          //移除按钮
        },
      });

      // 工具条点击事件
      table.on("tool(warehouseProductTable)", function (obj) {
        var data = obj.data;
        data.customerNameId = data.customerId;
        data.customerName = data.customer;
        if (obj.event === "edit") {
          //修改

          showEditModel(data);
        } else if (obj.event === "del") {
          // 删除
          doDelete(obj);
        }
      });

      //监听排序
      table.on("sort(warehouseProductTable)", function (obj) {
        table.reload("warehouseProductTable", {
          initSort: obj,
          where: {
            sort: obj.field,
            order: obj.type,
          },
        });
      });

      // 搜索
      form.on("submit(formSubSearchLog)", function (data) {
        insTb.reload({ where: data.field, page: { curr: 1 } }, "data");
      });

      // 重置搜索
      form.on("submit(resets)", function (data) {
        insTb.reload(
          { where: admin.resetSearch(data.field), page: { curr: 1 } },
          "data"
        );
      });

      // 添加按钮点击事件
      $("#warehouseProductBtnAdd").click(function () {
        showEditModel();
      });
      $("#configFun").click(function () {
        let list = table.checkStatus("warehouseProductTable").data;
        childData.list = list;
        layer.close(nowData.zindex);
      });
      // 显示编辑弹窗
      function showEditModel(data) {
        admin.open({
          type: 1,
          area: "640px",
          offset: "65px",
          title: data ? "修改产品" : "添加产品",
          content: $("#warehouseProductForm").html(),
          success: function () {
            // 查看大图
            layer.photos({
              photos: ".companyFormPhotos",
              anim: 5,
            });
            debugger;
            //客户信息
            admin.reqSync(
              "enterprise/sell/admin/customersInfo/list",
              { limit: 9999 },
              function (res) {
                layer.closeAll("loading");
                if (res.code == 200) {
                  loadSelectHtml(res.data, "请选客户信息", "customerNameId", 4);
                }
                if (data) {
                  $("#customerNameId").prop("disabled", true);
                  layui.form.render("select"); // 重新渲染 select
                }
              },
              "GET"
            );

            var parentId;
            admin.reqSync(
              "enterprise/dict/admin/dictLabel/list?page=1&limit=10&dictType=sys_device_type_code",
              {},
              function (res) {
                if (res.code == 200) {
                  parentId = res.data[0].labelValue;
                }
              }
            );

            //自定义验证规则
            form.verify({
              isOnly: function (value) {
                var isOnly = true;
                var idVal = $("form input[name='id']").val();
                admin.req(
                  "enterprise/purchase/admin/supplierLevel/isOnly",
                  { code: value, id: idVal },
                  function (res) {
                    if (res.code == 200) {
                      isOnly = res.data;
                    }
                  },
                  "GET",
                  false
                );
                if (!isOnly) {
                  return "级别编号必须唯一";
                }
              },
            });
            //产品类型
            admin.reqSync(
              "enterprise/product/admin/productType/list?page=1&limit=9999",
              {},
              function (res) {
                layer.closeAll("loading");
                if (res.code == 200) {
                  loadSelectHtml(res.data, "请选择产品类型", "productTypeId");
                }
              },
              "GET"
            );
            //品种
            admin.reqSync(
              "enterprise/product/admin/productVariety/list?page=1&limit=9999",
              {},
              function (res) {
                layer.closeAll("loading");
                if (res.code == 200) {
                  loadSelectHtml(res.data, "请选择品种", "productVarietyId", 1);
                }
              },
              "GET"
            );
            // //材料
            admin.initDataSelectTree(
              true,
              "enterprise/product/admin/productMaterialCategory/getTreeData",
              { limit: 9999 },
              "productMaterial",
              data ? data.productMaterialId : null,
              "材料",
              "productMaterialId",
              function (obj) {}
            );
            //所属分类
            admin.initDataSelectTree(
              true,
              "enterprise/product/admin/productCategory/getTreeData",
              { limit: 9999 },
              "productCategory",
              data ? data.productCategoryId : null,
              "所属类型",
              "productCategoryId",
              function (obj) {}
            );
            //品牌
            admin.reqSync(
              "enterprise/product/admin/productBrand/list?page=1&limit=9999",
              {},
              function (res) {
                layer.closeAll("loading");
                if (res.code == 200) {
                  loadSelectHtml(res.data, "请选择品牌", "productBrandId");
                }
              },
              "GET"
            );
            //牌号
            admin.reqSync(
              "enterprise/product/admin/productMark/list?page=1&limit=9999",
              {},
              function (res) {
                layer.closeAll("loading");
                if (res.code == 200) {
                  loadSelectHtml(res.data, "请选择牌号", "productMarkId", 2);
                }
              },
              "GET"
            );
            //生产厂家
            admin.reqSync(
              "enterprise/product/admin/productProducer/list?page=1&limit=9999",
              {},
              function (res) {
                layer.closeAll("loading");
                if (res.code == 200) {
                  loadSelectHtml(
                    res.data,
                    "请选择生产商",
                    "productProducerId",
                    3
                  );
                }
              },
              "GET"
            );

            //主/辅单位
            admin.reqSync(
              "enterprise/product/admin/productUnit/list?page=1&limit=9999",
              {},
              function (res) {
                layer.closeAll("loading");
                if (res.code == 200) {
                  loadSelectHtml(res.data, "请选择单位", "productMainUnitId");
                  loadSelectHtml(res.data, "请选择单位", "productSubUnitId");
                }
              },
              "GET"
            );


            form.val("warehouseProductForm", data);
            $("#btnProductImageUrl").click(
              uploadImg(
                "btnProductImageUrl",
                "productImageUrlPath",
                "productImageUrl"
              )
            );

            // 表单提交事件
            form.on("submit(warehouseProductFormSubmit)", function (d) {
              layer.load(2);
              admin.req(
                data
                  ? "warehouse/warehouse/product/update"
                  : "warehouse/warehouse/product/add",
                d.field,
                function (res) {
                  layer.closeAll("loading");
                  if (res.code == 200) {
                    layer.msg(res.msg, { icon: 1 });
                    table.reload("warehouseProductTable");
                    layer.closeAll("page");
                  } else {
                    layer.msg(res.msg, { icon: 2 });
                  }
                },
                data ? "PUT" : "POST"
              );
              return false;
            });
          },
        });
      }
      // option渲染
      function loadSelectHtml(data, tips, htmltarget, type) {
        let html = " <option value>" + tips + "</option>";
        if (!data || data == null) {
          return;
        }
        for (let i = 0; i < data.length; i++) {
          if (type == 1) {
            html += `<option value='${data[i].id}' id='${data[i].id}'>${data[i].varietyName}</option>`;
          } else if (type == 2) {
            html += `<option value='${data[i].id}' id='${data[i].id}'>${data[i].markName}</option>`;
          } else if (type == 3) {
            html += `<option value='${data[i].id}' id='${data[i].id}'>${data[i].producerName}</option>`;
          } else if (type == 4) {
            html += `<option value='${data[i].id}' id='${
              data[i].id
            }' data='${JSON.stringify(data[i])}' >${
              data[i].customerName
            }</option>`;
          } else {
            html += `<option value='${data[i].id}' data='${JSON.stringify(
              data[i]
            )}'>${data[i].name}</option>`;
          }
        }

        $("form select[name='" + htmltarget + "']").html(html);
        form.render("select");
      }

      // 上传图片
      function uploadImg(_elem, pathId, inputId) {
        upload.render({
          elem: "#" + _elem,
          url: config.upload_url + "upload",
          data: {},
          accept: "file",
          exts: "jpg|png|RAR|zip|pdf|txt|doc|docx|xls|xlsx|ppt|pptx",
          headers: { Authorization: "Bearer " + config.getToken() },
          done: function (res) {
            if (res.code == 200) {
              layer.msg(res.msg || "上传成功", { icon: 1 });
              let imagUrl = res.data.url;
              $("#" + pathId).html('<img src="' + imagUrl + '"/>');
              $("#" + inputId).val(imagUrl);
            } else if (res.code == 502) {
              return location.replace("member/login.html");
            } else {
              layer.msg(res.msg || "上传失败", { icon: 2 });
            }
          },
        });
      }
    }
  );
</script>
